<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        @keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        @-webkit-keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        @-moz-keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        .wrap {
            width: 1000px;
            text-align: center;
            margin: 100px auto 0;
        }

        .wrap h1 {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-weight: 300;
        }

        .word {
            font-weight: 700;
        }

        .typed-cursor {
            opacity: 1;
            -webkit-animation: blink .7s infinite;
            -moz-animation: blink .7s infinite;
            animation: blink .7s infinite;
            display: none;
        }

        .saySection {
            margin-top: 50px;
        }

        .saySection input {
            font-size: 30px;
        }

        .saySection .txtSay {
            padding-left: 10px;
        }

        .saySection .btnSay {
            display: inline-block;
            padding: 0 20px;
            cursor: pointer;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(window).ready(function () {
            var initStr = "我是罗文浩大帅哥";
            var arr = initStr.split("");
            var num = 0;
            var str = "";
            var methodOne;
            $(".wrap .typed-cursor").show();
//            methodOne(num,str,arr);
            var inter = setInterval(function () {
                    if(arr[num] === undefined) {
                        clearInterval(inter);
                        $(".wrap .typed-cursor").hide();
                        return;
                    }
                    str += arr[num];
                    $(".wrap .word").text(str);
                    num++;
                },200);

            $(".wrap input:button").click(function () {
                num = 0;
                str = "";
                console.log($(".wrap input:text").text().split(""));
                var arrTextContent = $(".wrap input:text").val().split("");
//                methodOne(num,str,arrTextContent);
                    var inter = setInterval(function () {
                    if(arrTextContent[num] === undefined) {
                        clearInterval(inter);
                        $(".wrap .typed-cursor").hide();
                        return;
                    }
                    str += arrTextContent[num];
                    $(".wrap .word").text(str);
                    num++;
                },200);
            });

//            methodOne = function (num,str,arr) {
//                var inter = setInterval(function () {
//                    if(arr[num] === undefined) {
//                        return;
//                    }
//                    str += arr[num];
//                    $(".wrap .word").text(str);
//                    num++;
//                },200);
//            }
        });
    </script>
</head>

<body>

    <div class="wrap">
        <h1>
            You want to say ： <span class="word"></span><span class="typed-cursor">|</span> ！
        </h1>

        <div class="saySection">
            <input type="text" id="inValue" class="txtSay"/>
            <input type="button" value="Say" id="btnSay" class="btnSay"/>
        </div>
    </div>


</body>
</html>
